<!--
 * @Description: description
 * @version: 0.1
 * @Author: youhuimin
 * @Date: 2021-07-14 10:01:59
 * @LastEditors: youhuimin
 * @LastEditTime: 2021-09-15 11:45:49
 * @FilePath: \xdeas-user-web\src\common\echarts.vue
-->
<template>
  <div :id="id" class="echarts"></div>
</template>
<script>
let _this;
export default {
  name:'echarts',
  data(){
    return {
      id:'',
      chart:null,
    }
  },
  props:{
    option:{},
    echartsInstance:{},
    themeShine: {
      color: [
        "#f65f54",
        "#e5ae40",
        "#4f91ff",
        "#65b168",
        "#33a9a9",
        "#787885",
        "#ff7011",
        "#5d7deb",
        "#cf5fe8",
      ],

      backgroundColor: "rgba(0, 0, 0, 0)",

      textStyle: {},

      title: {
        textStyle: {
          color: "#27727b",
        },

        subtextStyle: {
          color: "#aaaaaa",
        },
      },

      line: {
        itemStyle: {
          borderWidth: "1",
        },

        lineStyle: {
          width: "3",
        },

        symbolSize: "5",

        symbol: "emptyCircle",

        smooth: false,
      },

      radar: {
        itemStyle: {
          borderWidth: "1",
        },

        lineStyle: {
          width: "3",
        },

        symbolSize: "5",

        symbol: "emptyCircle",

        smooth: false,
      },

      bar: {
        itemStyle: {
          barBorderWidth: 0,

          barBorderColor: "#dbdbdb",
        },
      },

      pie: {
        itemStyle: {
          borderWidth: 0,

          borderColor: "#dbdbdb",
        },
      },

      scatter: {
        itemStyle: {
          borderWidth: 0,

          borderColor: "#dbdbdb",
        },
      },

      boxplot: {
        itemStyle: {
          borderWidth: 0,

          borderColor: "#dbdbdb",
        },
      },

      parallel: {
        itemStyle: {
          borderWidth: 0,

          borderColor: "#dbdbdb",
        },
      },

      sankey: {
        itemStyle: {
          borderWidth: 0,

          borderColor: "#dbdbdb",
        },
      },

      funnel: {
        itemStyle: {
          borderWidth: 0,

          borderColor: "#dbdbdb",
        },
      },

      gauge: {
        itemStyle: {
          borderWidth: 0,

          borderColor: "#dbdbdb",
        },
      },

      candlestick: {
        itemStyle: {
          color: "#c1232b",

          color0: "#b5c334",

          borderColor: "#c1232b",

          borderColor0: "#b5c334",

          borderWidth: 1,
        },
      },

      graph: {
        itemStyle: {
          borderWidth: 0,

          borderColor: "#dbdbdb",
        },

        lineStyle: {
          width: 1,

          color: "#aaa",
        },

        symbolSize: "5",

        symbol: "emptyCircle",

        smooth: false,

        color: [
          "#f65f54",
          "#e5ae40",
          "#65b168",
          "#4f91ff",
          "#33a9a9",
          "#787885",
          "#ff7011",
          "#5d7deb",
          "#cf5fe8",
        ],

        label: {
          color: "#f2f2f2",
        },
      },

      map: {
        itemStyle: {
          normal: {
            areaColor: "#eee",

            borderColor: "#444",

            borderWidth: 0.5,
          },

          emphasis: {
            areaColor: "rgba(255,215,0,0.8)",

            borderColor: "#444",

            borderWidth: 1,
          },
        },

        label: {
          normal: {
            textStyle: {
              color: "#000",
            },
          },

          emphasis: {
            textStyle: {
              color: "rgb(100,0,0)",
            },
          },
        },
      },

      geo: {
        itemStyle: {
          normal: {
            areaColor: "#eee",

            borderColor: "#444",

            borderWidth: 0.5,
          },

          emphasis: {
            areaColor: "rgba(255,215,0,0.8)",

            borderColor: "#444",

            borderWidth: 1,
          },
        },

        label: {
          normal: {
            textStyle: {
              color: "#000",
            },
          },

          emphasis: {
            textStyle: {
              color: "rgb(100,0,0)",
            },
          },
        },
      },

      categoryAxis: {
        axisLine: {
          show: true,

          lineStyle: {
            color: "#e4e7ed",
          },
        },

        axisTick: {
          show: true,

          lineStyle: {
            color: "#cbd0d9",
          },
        },

        axisLabel: {
          show: true,

          textStyle: {
            color: "#303133",
          },
        },

        splitLine: {
          show: false,

          lineStyle: {
            color: ["#cccccc"],
          },
        },

        splitArea: {
          show: false,

          areaStyle: {
            color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
          },
        },
      },

      valueAxis: {
        axisLine: {
          show: false,

          lineStyle: {
            color: "#333333",
          },
        },

        axisTick: {
          show: false,

          lineStyle: {
            color: "#333333",
          },
        },

        axisLabel: {
          show: true,

          textStyle: {
            color: "#303133",
          },
        },

        splitLine: {
          show: true,

          lineStyle: {
            color: ["#e4e7ed"],
          },
        },

        splitArea: {
          show: false,

          areaStyle: {
            color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
          },
        },
      },

      logAxis: {
        axisLine: {
          show: false,

          lineStyle: {
            color: "#27727b",
          },
        },

        axisTick: {
          show: false,

          lineStyle: {
            color: "#333333",
          },
        },

        axisLabel: {
          show: true,

          textStyle: {
            color: "#303133",
          },
        },

        splitLine: {
          show: true,

          lineStyle: {
            color: ["#e4e7ed"],
          },
        },

        splitArea: {
          show: false,

          areaStyle: {
            color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
          },
        },
      },

      timeAxis: {
        axisLine: {
          show: true,

          lineStyle: {
            color: "#e4e7ed",
          },
        },

        axisTick: {
          show: true,

          lineStyle: {
            color: "#303133",
          },
        },

        axisLabel: {
          show: true,

          textStyle: {
            color: "#303133",
          },
        },

        splitLine: {
          show: false,

          lineStyle: {
            color: ["#cccccc"],
          },
        },

        splitArea: {
          show: false,

          areaStyle: {
            color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
          },
        },
      },

      toolbox: {
        iconStyle: {
          normal: {
            borderColor: "#c1232b",
          },

          emphasis: {
            borderColor: "#e87c25",
          },
        },
      },

      legend: {
        textStyle: {
          color: "#303133",
        },
      },

      tooltip: {
        axisPointer: {
          lineStyle: {
            color: "#27727b",

            width: 1,
          },

          crossStyle: {
            color: "#27727b",

            width: 1,
          },
        },
      },

      timeline: {
        lineStyle: {
          color: "#293c55",

          width: "1",
        },

        itemStyle: {
          normal: {
            color: "#27727b",

            borderWidth: 1,
          },

          emphasis: {
            color: "#72d4e0",
          },
        },

        controlStyle: {
          normal: {
            color: "#27727b",

            borderColor: "#27727b",

            borderWidth: "0.5",
          },

          emphasis: {
            color: "#27727b",

            borderColor: "#27727b",

            borderWidth: "0.5",
          },
        },

        checkpointStyle: {
          color: "#c1232b",

          borderColor: "#c23531",
        },

        label: {
          normal: {
            textStyle: {
              color: "#293c55",
            },
          },

          emphasis: {
            textStyle: {
              color: "#293c55",
            },
          },
        },
      },

      visualMap: {
        color: ["#c1232b", "#fcce10", "#f6efa6"],
      },

      dataZoom: {
        handleSize: "undefined%",

        textStyle: {},
      },

      markPoint: {
        label: {
          color: "#f2f2f2",
        },

        emphasis: {
          label: {
            color: "#f2f2f2",
          },
        },
      },
    },
  },
  mounted(){
    this.$nextTick(_=>{
      this.init()
    })
  },
  created() {
    // 设置随机数id
    let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
    let len = t.length
    let id = ''
    for (let i = 0; i < 32; i++) {
      id += t.charAt(Math.floor(Math.random() * len))
    }
    this.id = id
    _this = this;
  },
  watch:{
    option:{
      handler:function(val){
          if(this.chart){
          let notMerge = true
          this.chart.setOption(val,notMerge)
        }
      }
    }
  },
  methods:{
    init(){
      let echarts =  this.$echarts
      // 设置主题
      echarts.registerTheme("shine", this.themeShine);
      this.chart = echarts.init(document.getElementById(this.id),"shine")

        this.chart.setOption(this.option)

      window.addEventListener('resize', function () {
        _this.chart.resize()
      })
    },
      setOption(option){

          console.log("setoption");

          console.log(option);
          //  更新图表信息
          this.chart.setOption(option)
      },
  },
  beforeDestroy () {
    if (this.chart) {
      this.chart.clear()
    }
  },
}
</script>
<style lang="less" scoped>
.echart{
  width:100%;
  height: 100%;
}
</style>